<template>
  <div class="login-container">
    <h1 v-if="1">ZXS</h1>
    <el-card class="box-card">
      <div slot="header" class="login-title">
        <h2>登录</h2>
      </div>
      <div class="login-form">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="用户名" prop="id">
            <el-input type="text" v-model="ruleForm.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item class="info">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="goToRegister">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

  </div>
</template>

<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '' || value === undefined) {
          callback(new Error('请输入密码'));
        } else {
          // if(value.toString().length<6){
          //     callback(new Error('密码长度至少六位'));
          // }
          callback();
        }
      };
      var validateId = (rule, value, callback) => {
        if (value === '' || value === undefined) {
          callback(new Error('请输入账号'));
        } else {
          // if(value.toString().length<10){
          //     callback(new Error('账号长度至少十位'));
          // }
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '123456',
          id: '暴走萝莉',
        },
        rules: {
          pass: [
            {validator: validatePass, trigger: 'blur'}
          ],
          id: [
            {validator: validateId, trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.commit("updateUser", this.ruleForm);
            this.$http
              .get("http://localhost:8888/user/login?username=" + this.ruleForm.id + "&pass=" + this.ruleForm.pass)
              .then(result => {
                if (result.status === 200) {
                  if(result.body===''){
                    this.$message({
                      type: 'error',
                      message: '用户名或密码错误!'
                    });
                  }else{
                    this.$message({
                      type: 'success',
                      message: '登陆成功!'
                    });
                    this.$store.state.user = {}
                    // this.$store.state.user = result.body
                    result.body.birthdate = this.changeTimeFormat(result.body.birthdate)
                    this.$store.commit('updateUser',result.body)
                    localStorage.setItem('user', JSON.stringify(result.body))
                    sessionStorage.setItem("isLogin", 1);
                    this.$router.push({name: "fmain"});
                  }
                } else {
                  this.$message({
                    type: 'success',
                    message: '用户名或密码错误!'
                  });
                }
              });


          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      changeTimeFormat(val){
        let d = new Date(val);
        return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
      },
      goToRegister(){
        this.$router.push({name: "fregister"});
      },
    },
    mounted() {

    }

  }
</script>

<style scoped>
    .el-card {
      height: 500px;
      position: relative;
      width: 400px;
      margin: 60px auto 0;
      padding: 0px 0px;
      background-color: #fff;
      vertical-align: middle;
      display: inline-block;

    }

</style>
